<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/index.css">
</head>

<body>
  <!-- 顶部导航栏 -->
  <div class="t-nav-cover">
    <div class="layer site-nav">顶部导航栏</div>
  </div>
  <!-- banner -->
  <div class="t-main-cover">
    <div class="layer main-belt">banner</div>
  </div>
  <!-- 导航栏 -->
  <div class="main-nav-cover">
    <div class="layer main-nav">导航栏</div>
  </div>
  <!-- 主展示区域盒子 -->
  <div class="layer main-show-area clearfix">
    <!-- 左侧主要区域盒子 -->
    <div class="main-show-box main-area clearfix">
      <!-- 内上侧盒子 -->
      <div class="main-show">
        <!-- 导航菜单列表 -->
        <div class="nav-menu-list">导航菜单列表</div>
        <!-- 轮播图区域 -->
        <div class="sliders-wrap">
          <div class="main-slider">轮播图区域-主轮播图</div>
          <div class="goods-slider">
            <div class="goods-slider-hd"></div>
            轮播图区域-商品轮播图
          </div>
        </div>
        <!-- 热销区域 -->
        <div class="hot-sale-imgs">
          <div class="t-img">热销区域1</div>
          <div class="b-img">热销区域2</div>
        </div>
      </div>
      <!-- 内下侧盒子 -->
      <div class="head-line">内下侧盒子</div>
    </div>
    <!-- 右侧功能区域盒子 -->
    <div class="main-show-box funcs-area">
      <!-- 用户信息卡片 -->
      <div class="member">用户信息卡片</div>
      <!-- 用户提示 -->
      <div class="member-tip">用户提示</div>
      <!-- 公告 -->
      <div class="member-notice">公告</div>
      <!-- 生活便利 -->
      <div class="member-funcs">生活便利</div>
      <!-- apps图标 -->
      <div class="member-apps">apps图标</div>
    </div>
  </div>
  <!-- 生活研究所卡片 -->
  <div class="layer life-belt">生活研究所卡片</div>

  <script src="./src/js/index.js" type="module"></script>
</body>

</html>